<template>
  <div>
    <h1>人员列表</h1>
    <h3>上方组件的求和为：{{ sum }}</h3>
    <h3>第一个人叫：{{ firstPersonName }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />&nbsp;
    <button @click="submit">添加</button>
    <button @click="wang">添加姓王的人</button>
    <button @click="randomAdd">随便添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
// import { mapState } from "vuex";
export default {
  name: "ShowPerson",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    personList() {
      return this.$store.state.personAbout.personList;
    },
    sum() {
      return this.$store.state.countAbout.sum;
    },
    firstPersonName() {
      return this.$store.getters["personAbout/firstPersonName"];
    },
  },
  methods: {
    submit() {
      const personobj = { id: nanoid(), name: this.name };
      this.$store.commit("personAbout/ADD_PERSON", personobj);
      this.name = "";
    },
    wang() {
      const personobj = { id: nanoid(), name: this.name };
      this.$store.dispatch("personAbout/addPerosonWang", personobj);
      this.name = "";
    },
    randomAdd() {
      this.$store.dispatch("personAbout/addPersonServer");
    },
  },
};
</script>

<style>
</style>